<template>
    <div style="line-height: 20px">
        <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span><el-image src='https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'></el-image></span>
    <el-popover
  placement="right"
  width="400"
  trigger="click">
  <el-table :data="gridData">
    <el-table-column width="150" property="date" label="续租时长"></el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">增加</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button slot="reference"  style="float: right; padding: 3px 0">增加租车位时间</el-button>
</el-popover>
    <!-- <el-button style="float: right; padding: 3px 0" type="text">增加租车位时间</el-button> -->
  </div>
  <div class="text item" >
      <ul style="list-style:none;text-align:left">
          <li>地段：1</li>
          <li>停车场类型: 1</li>
          <li>物业：1</li>
          <li>地址：1</li>
          <li>车位区域：1</li>
          <li>车位编号：1</li>
          <li>车位价格：1</li>
          <li>到达时间：13:00</li>
          <li>车位预计结束时间：15:00</li>
      </ul>
      <span>剩余时间：</span>
      <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
  </div>
  <el-button @click="b">提前离开</el-button>
</el-card>
    </div>
</template>

<script>
export default {
    name:"myParking",
    methods:{
        handleClick(){
            alert("增加成功")
           this.$router.go(0);
        },
         b(){
           this.$router.push({name:"PayRetrun"})
         }
    },data() {
        return {
        gridData: [{
          date: '1小时'
        },{
          date: '2小时'
        },{
          date: '3小时'
        }]
        }
    }
}
</script>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

</style>